<template>
  <div>
    <Modal
      v-model="modal.add"
      title="添加"
      :mask-closable="false"
      @on-visible-change="changeModalVisibleResetForm('addForm', $event)"
      width="1020"
    >
      <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="24">
            <FormItem label="商品图片" prop="thePicUrl">
              <img :src="thePicUrl" style="width: 100px;cursor: pointer;" @click="showImgModal(thePicUrl)" />
            </FormItem>
          </i-col>
        
          <i-col span="12">
            <FormItem label="商品编号" prop="goodsId">
              <span v-text="form.goodsId"></span>
              -
              <span v-text="goodsName"></span>
              &nbsp;
              <Button @click="showModal('choice')" type="text" style="color: #108EE9;">选择商品</Button>&nbsp;
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="图片编号" prop="picId">
              <span v-text="form.picId"></span>
              &nbsp;
              <Button @click="showModal('choicePic')" type="text" style="color: #108EE9;">选择商品图片</Button>&nbsp;
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="售卖标题" prop="title">
              <Input v-model="form.title" placeholder="请输入售卖标题" clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="原价" prop="price">
            <InputNumber v-model="form.price" placeholder="请输入原价" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="销售价" prop="salePrice">
            <InputNumber v-model="form.salePrice" placeholder="请输入销售价" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="库存" prop="stockCount">
            <InputNumber v-model="form.stockCount" placeholder="请输入库存" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            
				<FormItem label="上架状态" prop="shelfStatus">
					
						<Select v-model="form.shelfStatus" placeholder="请选择上架状态" filterable clearable>
						  <Option
							v-for="(option, index) in shelfStatusSelect"
							:value="option.value"
							:key="index"
						  >{{option.displayValue}}</Option>
						</Select>
					
				</FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
        <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
      </div>
    </Modal>
    <Modal
      v-model="modal.edit"
      title="修改"
      :mask-closable="false"
      @on-visible-change="changeModalVisibleResetForm('editForm', $event)"
      width="1020"
    >
      <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
            <FormItem label="商品编号" prop="goodsId">
              <span v-text="form.goodsId"></span>
              -
              <span v-text="goodsName"></span>
              &nbsp;
              <Button @click="showModal('choice')" type="text" style="color: #108EE9;">选择商品</Button>&nbsp;
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="图片编号" prop="picId">
              <span v-text="form.picId"></span>
              <img :src="thePicUrl" style="width: 100px;cursor: pointer;" @click="showImgModal(thePicUrl)" />
              &nbsp;
              <Button @click="showModal('choicePic')" type="text" style="color: #108EE9;">选择商品图片</Button>&nbsp;
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="售卖标题" prop="title">
              <Input v-model="form.title" placeholder="请输入售卖标题" clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="原价" prop="price">
            <InputNumber v-model="form.price" placeholder="请输入原价" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="销售价" prop="salePrice">
            <InputNumber v-model="form.salePrice" placeholder="请输入销售价" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="库存" prop="stockCount">
            <InputNumber v-model="form.stockCount" placeholder="请输入库存" style="width: 100%;"  clearable/>
            </FormItem>
          </i-col>
          <i-col span="12">
				<FormItem label="上架状态" prop="shelfStatus">
					
						<Select v-model="form.shelfStatus" placeholder="请选择上架状态" filterable clearable>
						  <Option
							v-for="(option, index) in shelfStatusSelect"
							:value="option.value"
							:key="index"
						  >{{option.displayValue}}</Option>
						</Select>
					
				</FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
        <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
      </div>
    </Modal>
    <Modal v-model="modal.choice" title="选择商品" :mask-closable="false" width="1020">
      <GoodsInfoMainSingle
        ref="choiceModal"
        v-on:confirmChoice="confirmChoice"
      />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('choice')">取消</Button>
        <Button type="primary" size="large" @click="bottomConfirmChoice('choiceModal')">确认选择</Button>
      </div>
    </Modal>
    <Modal v-model="modal.choicePic" title="选择商品图片" :mask-closable="false" width="1020">
      <GoodsPicMainSingle
        ref="choicePicModal"
        v-on:confirmChoice="confirmChoicePic"
      />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('choicePic')">取消</Button>
        <Button type="primary" size="large" @click="bottomConfirmChoice('choicePicModal')">确认选择</Button>
      </div>
    </Modal>
    <ImgModal ref="imgModal" />
  </div>
</template>

<script>
import GoodsInfoMainSingle from '../goods-info/GoodsInfoMainSingle.vue'
import GoodsPicMainSingle from '../goods-pic/GoodsPicMainSingle.vue'
import ImgModal from '_c/img-modal'
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'

import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl
export default {
  name: 'GoodsSkuAddEdit',
  components: {
    GoodsInfoMainSingle,
    GoodsPicMainSingle,
    ImgModal
  },
  data() {
    return {
      modal: {
        add: false,
        edit: false,
        choice: false,
        choicePic: false
      },
      loading: {
        add: false,
        edit: false
      },
	  dataDictCodes: ['GOODS_SHELF_STATUS'],
	  dataDictItems: {},
	  shelfStatusSelect:[],
      urls: {
        addUrl: '/goods-sku/admin/save',
        batchAddUrl: '/goods-sku/admin/batch-save',
        editUrl: '/goods-sku/admin/update',
        batchEditUrl: '/goods-sku/admin/batch-update'
      },
      goodsId: null,
      goodsName: null,
      thePicUrl: null,
      form: {
        shopId: null,
        goodsId: null,
        picId: null,
        picUrl: null,
        title: null,
        price: null,
        salePrice: null,
        stockCount: null,
        shelfStatus: 0,
        version: null,
        createTime: null,
        updateTime: null,
        isActive: null
      },
      validateRules: {
                            shopId: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
        goodsId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        title: [
          {type: 'string', required: true, min: 1, max: 100, message: '必须1-100个字符', trigger: 'blur'}
        ],
        salePrice: [
          {type: 'number', required: true, message: '此项为必须项', trigger: 'blur, change'}
        ],
        stockCount: [
          {type: 'number', required: true, message: '此项为必须项', trigger: 'blur, change'}
        ],
      }
    }
  },
  computed: {},
  mounted() {
	  utils.getDataDict(this.dataDictCodes).then(response => {
	    if (response) {
	      this.dataDictItems = response
	      utils.getSelectDictItems(this, 'GOODS_SHELF_STATUS', 'shelfStatus', 'shelfStatusSelect')
	    }
	  }).catch(error => {
	    console.log(error)
	  })
  },
  methods: {
    changeModalVisibleResetForm(formRef, visible) {
      if (!visible) {
        this.$refs[formRef].resetFields()
        this.form.goodsId = this.goodsId
        this.form.id = null
      }
    },
    resetFormCancelModal(formRef, modal) {
      this.modal[modal] = false
      this.$refs[formRef].resetFields()
      this.form.goodsId = this.goodsId
      this.form.id = null
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    },
    /**
     * 显示弹窗
     */
    showModal(modal) {
      if (modal === 'choice') {
        let choiceModal = this.$refs.choiceModal
        choiceModal.selectedData = [{
          goodsId: this.form.goodsId
        }]
        choiceModal.selectedDataIdProp = 'goodsId'
        choiceModal.$refs.searchModal.searchForm.id = this.form.goodsId
        choiceModal.searchTable(true)
      } else if (modal === 'choicePic') {
        if (!this.form.goodsId) {
          this.$Message.warning('请先选择商品')
          return
        }
        let choicePicModal = this.$refs.choicePicModal
         choicePicModal.selectedData = [{
           picId: this.form.picId
         }]
         choicePicModal.selectedDataIdProp = 'picId'
        choicePicModal.setSearchModalData({goodsId:this.form.goodsId})
        choicePicModal.searchTable(true)
      }
      this.modal[modal] = true
    },
    /**
     * 关闭弹窗
     */
    cancelModal(modal) {
      this.modal[modal] = false
    },
    /**
     * 底部的确认选择
     */
    bottomConfirmChoice(refName) {
      this.$refs[refName].confirmSelection()
    },
    /**
     * 确认选择商品
     */
    confirmChoice(row) {
      this.cancelModal('choice')
      this.form.shopId = row.shopId
      this.form.goodsId = row.id
      this.goodsName = row.title
    },
    /**
     * 确认选择商品图片
     */
    confirmChoicePic(row) {
      this.cancelModal('choicePic')
      this.form.picId = row.id
      this.thePicUrl = cdnUrl + '/' + row.picUrl
      this.form.picUrl = row.picUrl
    },
    /**
     * 显示图片预览的弹窗
     */
    showImgModal(src) {
      let imgModal = this.$refs.imgModal
      imgModal.modal.img = true
      imgModal.imgSrc = src
    }
  }
}
</script>

<style>
</style>
